
/* 不带Tab底部滑动效果 */
/* div.m-tabs{
    
}
div.m-tabs>ul.m-tab{
	margin:0;
	padding:0;
	list-style: none;
	overflow: hidden;
}

div.m-tabs>ul.m-tab>li{
	float:left;
	display:inline-block;
	min-width: 100px;
	padding:10px 0;
	text-align: center;
	color:#ccc;
}

div.m-tabs>ul.m-tab>li.t-active{
	color:#5ebb98;
	border-bottom: 2px solid #cc6586;
}
div.m-tabs>div.m-tab-content{
	border-top: 1px solid #ccc;
} */


/* tab底部带滑动效果 */
div.m-tabs{
    
}
div.m-tabs>ul.m-tab{
	margin:0;
	padding:0;
	list-style: none;
	overflow: hidden;
}

div.m-tabs>ul.m-tab>li{
	float:left;
	display:inline-block;
	min-width: 100px;
	padding:10px 0;
	text-align: center;
	color:#ccc;
}
/*tab标题下的横线*/
div.m-tabs>div.m-tab-bottom{
   max-width: 100px;
   height:2px;
   background-color:#cc6586;
   transition:transform 0.2s;
   -webkit-transition:transform 0.2s;
}
/* 被选中的tab标题字体变色 */
 div.m-tabs>ul.m-tab>li.t-active{
	color:#5ebb98;
} 
div.m-tabs>div.m-tab-content{
	border-top: 1px solid #ccc;
	overflow: hidden;
}
/* tab下的pane的渐入渐出动画效果 */
div.m-tabs>div.m-tab-content>div.m-tab-pane{
	animation: tabanimation 0.2s;
	-webkit-animation: tabanimation 0.2s;
}
@keyframes tabanimation{
   /* from{opacity:0;}
   to{opacity:1;} */
   from{transform:translateX(400px);}
  to{transform:translateX(0px);} 
}
@-webkit-keyframes tabanimation{
   /* from{opacity:0;}	
   to{opacity:1;} */
   from{transform:translateX(400px);}
   to{transform:translateX(0px);}
}
